<template>
  <div class="left-side-container">
    <!-- 左侧的tab -->
    <div class="tabs">
      <!-- 题型 -->
      <div
        class="tab-item"
        :class="{
          'tab-show': routeName === 'survey-types',
        }"
        @click="switchEditor"
      >
        <i-ep-memo />
        <span class="text-sm mt-2">题型</span>
      </div>
      <!-- 大纲 -->
      <div
        class="tab-item"
        :class="{
          'tab-show': routeName === 'outline',
        }"
        @click="switchOutline"
      >
        <i-ep-document />
        <span class="text-sm mt-2">大纲</span>
      </div>
    </div>
    <!-- 题型和大纲的组件 -->
    <RouterView class="tab-pane" />
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue';
import { useRoute, useRouter } from 'vue-router';
const route = useRoute();
const routeName = computed(() => route.name);
const router = useRouter();

const switchEditor = () => {
  router.push({ name: 'survey-types' });
};

const switchOutline = () => {
  router.push({ name: 'outline' });
};
</script>

<style scoped lang="scss">
.left-side-container {
  width: 300px;
  height: 100%;
  display: flex;
  background: var(--x-white);
  border: 1px solid var(--x-border-color);
  border-radius: var(--x-border-radius-md);
  > .tabs {
    width: 20%;
    height: 100%;
    border-right: 1px solid var(--x-border-color);
    > .tab-item {
      width: 100%;
      height: 100px;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      color: var(--x-font-color-light);
      text-decoration: none;
      cursor: pointer;
    }
    > .tab-show {
      color: var(--x-primary-color);
    }
  }
  > .tab-pane {
    width: 80%;
    // 高度需要减去padding部分，否则会溢出
    height: 100%;
    padding: 15px;
    overflow-y: auto;
  }
}
</style>
